import React, { FC, useState } from "react";
import { Button, Space, Divider, Tag, Popconfirm, message } from "antd";
import {
  CopyOutlined,
  DeleteOutlined,
  EditOutlined,
  LineChartOutlined,
  StarOutlined,
} from "@ant-design/icons";
import { useNavigate, Link } from "react-router-dom";
import styles from "./QuestionCard.module.scss";
import { updateQuestion, copyQuestion } from "../utils/api";
import { useRequest } from "ahooks";
type PropsType = {
  _id: string;
  title: string;
  isStar: boolean;
  isPublished: boolean;
  answerCount: number;
  createDate: string;
};
const QuestionCard: FC<PropsType> = (props: PropsType) => {
  const { _id, title, isStar, createDate, answerCount, isPublished } = props;
  const nav = useNavigate();
  //标星
  const [isStarState, setIsStarState] = useState(isStar);
  const { run: starHandle, loading: changeStarLoading } = useRequest(
    async () => {
      await updateQuestion(_id, { isStar: !isStarState });
    },
    {
      manual: true,
      onSuccess(res) {
        message.success("操作成功");
        setIsStarState(!isStarState);
      },
    }
  );
  //复制问卷
  const { run: CopyHandle, loading: copyLoading } = useRequest(
    async () => await copyQuestion(_id),
    {
      manual: true,
      onSuccess(res) {
        message.success("复制成功");
        nav(`/question/edit/${res.id}`);
      },
    }
  );
  //删除问卷
  const [isDelectedState,setIsDelectedState]=useState(false)
  const { run: DeleteHandle, loading: delectLoading } = useRequest(
    async () => {
      await updateQuestion(_id, { isDelected: true });
    },
    {
      manual: true,
      onSuccess(res) {
        message.success("删除成功,可在回收站查看");
        setIsDelectedState(true)
      },
    }
  );
  if(isDelectedState) return null
  return (
    <div className={styles.container}>
      <div className={styles.title}>
        <div className={styles.left}>
          <Link
            to={isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`}
          >
            <Space>
              {isStarState && <StarOutlined style={{ color: "yellow" }} />}
              {title}
            </Space>
          </Link>
        </div>
        <div className={styles.right}>
          <Space>
            {isPublished ? (
              <Tag color="processing">已发布</Tag>
            ) : (
              <Tag>未发布</Tag>
            )}
            <span>答卷 : {answerCount}</span>
            <span>{createDate}</span>
          </Space>
        </div>
      </div>
      <Divider style={{ margin: "14px" }} />
      <div className={styles["button_container"]}>
        <div className={styles.left}>
          <Space>
            <Button
              type="text"
              size="small"
              icon={<EditOutlined />}
              onClick={() => nav(`/question/edit/${_id}`)}
            >
              编辑问卷
            </Button>
            <Button
              type="text"
              size="small"
              icon={<LineChartOutlined />}
              onClick={() => nav(`/question/stat/${_id}`)}
              disabled={!isPublished}
            >
              数据统计
            </Button>
          </Space>
        </div>
        <div className={styles.right}>
          <Space>
            {/* <Button type="text" size="small" icon={<StarOutlined />}>
              {isStar ? "取消标星" : "标星"}
            </Button> */}
            {isStarState ? (
              <Button
                type="text"
                size="small"
                icon={
                  <StarOutlined
                    style={{ color: "yellow" }}
                    onClick={starHandle}
                    disabled={changeStarLoading}
                  />
                }
              >
                取消标星
              </Button>
            ) : (
              <Button
                type="text"
                size="small"
                icon={<StarOutlined />}
                onClick={starHandle}
                disabled={changeStarLoading}
              >
                标星
              </Button>
            )}
            <Popconfirm
              title="是否确定复制该问卷"
              okText="确定"
              cancelText="取消"
              onConfirm={CopyHandle}
            >
              <Button
                type="text"
                size="small"
                icon={<CopyOutlined />}
                disabled={copyLoading}
              >
                复制
              </Button>
            </Popconfirm>
            <Popconfirm
              title="是否确定删除该问卷"
              okText="确定"
              cancelText="取消"
              onConfirm={DeleteHandle}
            >
              <Button type="text" size="small" icon={<DeleteOutlined />} disabled={delectLoading}>
                删除
              </Button>
            </Popconfirm>
          </Space>
        </div>
      </div>
    </div>
  );
};
export default QuestionCard;
